<template>
    <link type="text/css" rel="stylesheet" href="./assets/css/typelist.css">
    <van-nav-bar
        left-text="商品分类"   
    />

    <div style="display: flex;">
        <van-sidebar v-model="active" @change="change" >
            <!-- 名字 -->
            <van-sidebar-item :title="item.name" v-for="item in type" :value="item.id"/>
        </van-sidebar>
                
        <div class="scrolltab-content">
            <div class="scrolltab-content-item">
                <div>
                    <!-- <a class="aui-flex-box" href="javascript:;" >
                        <div class="aui-flex-box-bd">{{ item.type.name }}</div>
                    </a> -->
                    <div class="aui-flex-links" v-for="item in list">
                        <router-link :to="{path:'/product/info',query:{proid: item.id}}" class="aui-flex-links-item">
                            <div class="aui-flex-links-img"> 
                                <img :src="item.thumb_text" alt=""> 
                            </div>
                            <div class="aui-flex-links-text">
                                {{item.name}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <menus />

</template>

<script setup>
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    let type = ref({})
    let active = ref(0)
    let typeid = ref(0)

    // 下拉刷新
    let list = ref({})

    onBeforeMount(() => {
        GetType()
        change()
    })

    let GetType = async () => {
        var result = await proxy.$POST({
            url: '/index/type',
            params: {}
        })
        
        if(result.code == 0){
            proxy.$fail(result.msg)
        }else{
            type.value = result.data
            
        }
    }

    const change = async (active) => {
        // console.log(active);
        
        if(active >= 0){
           typeid = type.value[active].id 
           var result = await proxy.$POST({
                url: '/index/productlist',
                params:{typeid: typeid}
            })

            if(result.code == 0){
                proxy.$fail(result.msg)
                return false
            }else{
                list.value = result.data
                // console.log(result.data);
            }
        }
    }
    
</script>
